<h2 class="sub-header">我的联系人</h2>
<div class="table-responsive">
  <!-- Single button -->
  <div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
      所有 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">朋友</a></li>
      <li><a href="#">家人</a></li>
      <li><a href="#">公司</a></li>
      <li><a href="#">同学</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <a class="btn btn-success pull-right" routerLink="/contacts/new">新增联系人</a>
  <table class="table table-striped">
    <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>邮箱</th>
      <th>电话</th>
      <th>标签</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of contacts; let id = index;">
      <td>{{id + 1}}</td>
      <td>{{item.name}}</td>
      <td>{{item.email}}</td>
      <td>{{item.phone}}</td>
      <td><span class="label label-info">朋友</span></td>
      <td>
        <button class="btn btn-primary" [routerLink]="['/contacts/edit',item.userId]">编辑</button>
        <button class="btn btn-danger" (click)="deleteContactById(item.userId)">删除</button>
      </td>
    </tr>

    </tbody>
  </table>
</div>
